/**
 * Created by ClearLiang on 2019/2/25
 * Function:
 * Desc:
 */
 import React, {Component} from 'react';
 import {StyleSheet,Text,View} from 'react-native';
 import PropTypes from 'prop-types';// 现在PropTypes不在react中

 export default class LifecycleComponent extends Component{
    // 属性检测
    static propTypes = {
        name:PropTypes.string,
        height:PropTypes.number,
        width:PropTypes.number,
    };
    // 默认值设置
    static defaultProps = {
        name:'UnKnown',
        height:100,
        width:100,
    };
    // 初始化state
    constructor(props){
        super(props);
        this.state = {
            count:0,
        };
        console.log('constructor')
    }
    // 加载前
    componentWillMount(): void {
        console.log('componentWillMount')
    }
    // 加载后
    componentDidMount(): void {
        console.log('componentDidMount')
    }
    // 接收改变参数( props或者state改变 )
    componentWillReceiveProps(nextProps: Readonly<P>, nextContext: any): void {
        console.log('componentWillReceiveProps')
    }
    // 是否更新( state改变 )
    shouldComponentUpdate(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): boolean {
        console.log('shouldComponentUpdate')
        return true;
    }
    // 更新前
    componentWillUpdate(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): void {
        console.log('componentWillUpdate')
    }
    // 更新后
    componentDidUpdate(prevProps: Readonly<P>, prevState: Readonly<S>, snapshot: SS): void {
        console.log('componentDidUpdate')
    }
    // 移除前
    componentWillUnmount(): void {
        console.log('componentWillUnmount')
    }

     render(){
         console.log('render')
        return (
            <View>
                <Text onPress={()=>{
                    this.setState({
                        count:this.state.count+1
                    })
                }}>Hello World</Text>
                <Text  style={ {
                    height:this.props.height,
                    width:this.props.width,
                    color:this.props.color,
                    fontSize:this.props.fontSize,
                }}>
                    {this.props.name}计数：{this.state.count}</Text>
            </View>

        );
    }
 }

 // 构建样式
const styles = StyleSheet.create({
    /*
    * *******    style属性    *******
    * flexDirection        水平：row   竖直：column
    * justifyContent       flex-start、center、flex-end、space-around、space-between以及space-evenly
    * alignItems           flex-start、center、flex-end、stretch。
    * */
    fromStyle:{

    },
});